<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 32 32"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M12.625 16c-.319 0-.586-.106-.802-.317a1.048 1.048 0 0 1-.323-.783c0-.312.108-.573.324-.784.216-.211.483-.317.801-.316h6.75c.319 0 .586.106.802.317.216.211.324.472.323.783 0 .312-.108.573-.324.784a1.097 1.097 0 0 1-.801.316h-6.75Zm0-4.4c-.319 0-.586-.106-.802-.317a1.048 1.048 0 0 1-.323-.783c0-.312.108-.573.324-.784.216-.211.483-.317.801-.316h6.75c.319 0 .586.106.802.317.216.211.324.472.323.783 0 .312-.108.573-.324.784a1.097 1.097 0 0 1-.801.316h-6.75ZM9.25 18.2h8.438c.543 0 1.05.115 1.518.344.469.23.863.555 1.181.976l2.363 3.025V7.2H9.25v11Zm0 6.6h12.431l-3.065-3.933a1.218 1.218 0 0 0-.408-.344 1.1 1.1 0 0 0-.52-.123H9.25v4.4Zm13.5 2.2H9.25a2.192 2.192 0 0 1-1.59-.647A2.09 2.09 0 0 1 7 24.8V7.2c0-.605.22-1.123.662-1.554.44-.431.97-.647 1.588-.646h13.5c.619 0 1.149.216 1.59.647.44.431.66.949.66 1.553v17.6c0 .605-.22 1.123-.662 1.554-.44.431-.97.647-1.588.646Z" data-follow-fill="#fff" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Case extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
